<template>
  <div class="tools-btn" :class="{'active': isOpen}">
    <div @click="onToggleOpen" class="menu-btn">
      <ok-icon name="add1" class="icon-cont"></ok-icon>
    </div>
<!--    <div class="bili"></div>-->
    <div @click="onTest" class="menu-item menu-item1">
      <ok-icon name="homefill"></ok-icon>
    </div>
    <div @click="onTest" class="menu-item menu-item2">
      <ok-icon name="roundleftfill-copy"></ok-icon>
    </div>
    <div @click="onTest" class="menu-item menu-item3">
      <ok-icon name="favorfill"></ok-icon>
    </div>
    <div @click="onTest" class="menu-item menu-item4">
      <ok-icon name="likefill"></ok-icon>
    </div>
    <div @click="onTest" class="menu-item menu-item5">
      <ok-icon name="forwardfill"></ok-icon>
    </div>
  </div>
</template>

<script type="es6">
export default {
  inject: ['reload'], /**reload(callback);对应provide中的数组值*/
  name: "ToolsButton",
  data() {
    return {
      isOpen: false
    }
  },
  mounted() {

  },
  methods: {
    onToggleOpen() {
      this.isOpen = !this.isOpen;
    },
    onTest(){}
  }
}
</script>

<style lang="scss" scoped>
$width: 50px;
$height: 50px;
$width-item: 35px;
$height-item: 35px;
$interval: 15px;

$diff-width: $width - $width-item;
$diff-height: $height - $height-item;
.tools-btn {
  font-size: 0;
  width: $width;
  height: $height;
  line-height: 1;
  color: #FFFFFF;
  background: #333333;
  position: relative;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .bili{
    width: 120px;
    height: 120px;
    position: absolute;
    border-radius: 100%;
    border:1px solid red;
  }
  &.active {
    .menu-btn {
      transform: rotate(-135deg);
    }
    .menu-item{
      opacity: 1;
      &.menu-item1 {
        top: -$height - $interval + $diff-height / 2;
      }

      &.menu-item2 {
        top: (-$height - $interval + $diff-height / 2) / 1.45;
        left: (-$width - $interval + $diff-width / 2) / 1.45;
      }

      &.menu-item3 {
        left: -$width - $interval + $diff-width / 2;
      }

      &.menu-item4 {
        top: -(-$height - $interval + $diff-height / 2);
        left: (-$width - $interval + $diff-width / 2) / 1.45;
      }

      &.menu-item5 {
        top: $height + $interval + $diff-height / 2;
      }
    }
  }

  .menu-btn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .25s all;
    position: relative;
    z-index: 9;
  }

  .icon-cont {
    font-size: 32px;
    font-weight: bolder;
  }

  .menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: $width-item;
    height: $height-item;
    background: #333333;
    border-radius: 100%;
    top: $diff-width / 2;
    left: $diff-height / 2;
    transition: .25s all;
    opacity: 0;
    .ok-icon {
      font-size: 18px!important;
    }
  }
}

</style>